<template>
  <div>
    <div class="slider-area">
      <div class="slider-active owl-dot-style owl-carousel">
        <div class="single-slider pt-100 pb-100 yellow-bg">
          <div class="container">
            <div class="row">
              <div class="col-lg-6 col-md-6 col-12 col-sm-7">
                <div class="slider-content slider-animated-1 pt-114">
                  <h3 class="animated">We do our best to provide what you need.
                  </h3>
                  <h1 class="animated">A variety of pets <br>are at your disposal.</h1>
                  <div class="slider-btn"><router-link to="/catalog/viewCatalog">SHOP NOW</router-link></div>
                </div>
              </div>
              <div class="col-lg-6 col-md-6 col-12 col-sm-5">
                <div class="slider-single-img slider-animated-1">
                  <img class="animated" src="static/picture/slider-single-img.png" alt=""></div>
              </div>
            </div>
          </div>
        </div>
        <div class="single-slider pt-100 pb-100 yellow-bg">
          <div class="container">
            <div class="row">
              <div class="col-lg-6 col-md-6 col-sm-7 col-12">
                <div class="slider-content slider-animated-1 pt-114">
                  <h3 class="animated">
                    We do our best to provide what you need.
                  </h3>
                  <h1 class="animated">A variety of pets <br>are at your disposal.</h1>
                  <div class="slider-btn"> <router-link to="/catalog/viewCatalog">SHOP NOW</router-link></div>
                </div>
              </div>
              <div class="col-lg-6 col-md-6 col-sm-5 col-12">
                <div class="slider-single-img slider-animated-1">
                  <img class="animated" src="static/picture/slider-single-img-2.png" alt=""></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
<!--    <div class="slider-area">-->
<!--      <div class="slider-active owl-dot-style owl-carousel owl-loaded owl-drag">-->


<!--        <div class="owl-stage-outer">-->
<!--          <div class="owl-stage"-->
<!--               style="transform: translate3d(-3339px, 0px, 0px); transition: all 0s ease 0s; width: 6678px;">-->
<!--            <div class="owl-item cloned" style="width: 1313px;">-->
<!--              <div class="single-slider pt-100 pb-100 yellow-bg">-->
<!--                <div class="container">-->
<!--                  <div class="row">-->
<!--                    <div class="col-lg-6 col-md-6 col-12 col-sm-7">-->
<!--                      <div class="slider-content slider-animated-1 pt-114"><h3 class="animated">We keep pets for-->
<!--                        pleasure.</h3>-->
<!--                        <h1 class="animated">Food &amp; Vitamins <br>For all Pets</h1>-->
<!--                        <div class="slider-btn">-->
<!--                          <router-link to="/catalog/viewCatalog">SHOP NOW</router-link>-->
<!--                        </div>-->
<!--                      </div>-->
<!--                    </div>-->
<!--                    <div class="col-lg-6 col-md-6 col-12 col-sm-5">-->
<!--                      <div class="slider-single-img slider-animated-1"><img class="animated"-->
<!--                                                                            src="../../static/picture/slider-single-img.png"-->
<!--                                                                            alt=""></div>-->
<!--                    </div>-->
<!--                  </div>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
<!--            <div class="owl-item cloned" style="width: 1313px;">-->
<!--              <div class="single-slider pt-100 pb-100 yellow-bg">-->
<!--                <div class="container">-->
<!--                  <div class="row">-->
<!--                    <div class="col-lg-6 col-md-6 col-sm-7 col-12">-->
<!--                      <div class="slider-content slider-animated-1 pt-114"><h3 class="animated">We keep pets for-->
<!--                        pleasure.</h3>-->
<!--                        <h1 class="animated">Food &amp; Vitamins <br>For all Pets</h1>-->
<!--                        <div class="slider-btn">-->
<!--                          <router-link to="/catalog/viewCatalog">SHOP NOW</router-link>-->

<!--                        </div>-->
<!--                      </div>-->
<!--                    </div>-->
<!--                    <div class="col-lg-6 col-md-6 col-sm-5 col-12">-->
<!--                      <div class="slider-single-img slider-animated-1"><img class="animated"-->
<!--                                                                            src="../../static/picture/slider-single-img-2.png"-->
<!--                                                                            alt=""></div>-->
<!--                    </div>-->
<!--                  </div>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
<!--            <div class="owl-item" style="width: 1313px;">-->
<!--              <div class="single-slider pt-100 pb-100 yellow-bg">-->
<!--                <div class="container">-->
<!--                  <div class="row">-->
<!--                    <div class="col-lg-6 col-md-6 col-12 col-sm-7">-->
<!--                      <div class="slider-content slider-animated-1 pt-114"><h3 class="animated">We keep pets for-->
<!--                        pleasure.</h3>-->
<!--                        <h1 class="animated">Food &amp; Vitamins <br>For all Pets</h1>-->
<!--                        <div class="slider-btn">-->
<!--                          <router-link to="/catalog/viewCatalog">SHOP NOW</router-link>-->
<!--                        </div>-->
<!--                      </div>-->
<!--                    </div>-->
<!--                    <div class="col-lg-6 col-md-6 col-12 col-sm-5">-->
<!--                      <div class="slider-single-img slider-animated-1"><img class="animated"-->
<!--                                                                            src="../../static/picture/slider-single-img.png"-->
<!--                                                                            alt=""></div>-->
<!--                    </div>-->
<!--                  </div>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
<!--            <div class="owl-item active" style="width: 1313px;">-->
<!--              <div class="single-slider pt-100 pb-100 yellow-bg">-->
<!--                <div class="container">-->
<!--                  <div class="row">-->
<!--                    <div class="col-lg-6 col-md-6 col-sm-7 col-12">-->
<!--                      <div class="slider-content slider-animated-1 pt-114"><h3 class="animated">We keep pets for-->
<!--                        pleasure.</h3>-->
<!--                        <h1 class="animated">Food &amp; Vitamins <br>For all Pets</h1>-->
<!--                        <div class="slider-btn">-->
<!--                          <router-link to="/catalog/viewCatalog">SHOP NOW</router-link>-->
<!--                        </div>-->
<!--                      </div>-->
<!--                    </div>-->
<!--                    <div class="col-lg-6 col-md-6 col-sm-5 col-12">-->
<!--                      <div class="slider-single-img slider-animated-1"><img class="animated"-->
<!--                                                                            src="../../static/picture/slider-single-img-2.png"-->
<!--                                                                            alt=""></div>-->
<!--                    </div>-->
<!--                  </div>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->

<!--          </div>-->
<!--        </div>-->
<!--        <div class="owl-nav">-->
<!--          <div class="owl-prev"><i class="icon-arrow-left"></i></div>-->
<!--          <div class="owl-next"><i class="icon-arrow-right"></i></div>-->
<!--        </div>-->
<!--        <div class="owl-dots">-->
<!--          <div class="owl-dot"><span></span></div>-->
<!--          <div class="owl-dot active"><span></span></div>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->
    <div class="food-category food-category-col pt-100 pb-60">
      <div class="container">
        <div class="row">
          <div class="col-lg-4 col-md-4">
            <div class="single-food-category cate-padding-1 text-center mb-30">
              <router-link :to="{name:'viewCatalog',query:{catId:'DOGS'}}">
                <div class="single-food-hover-2"><img src="../../static/picture/c-dogs.png" alt="dogs"></div>
                <div class="single-food-content">
                  <h3>Dogs</h3>
                </div>
              </router-link>
            </div>
          </div>
          <div class="col-lg-4 col-md-4">
            <div class="single-food-category cate-padding-2 text-center mb-30">
              <router-link :to="{name:'viewCatalog',query:{catId:'BIRDS'}}">
                <div class="single-food-hover-2"><img src="../../static/picture/c-birds.png" alt="birds"></div>
                <div class="single-food-content">
                  <h3>Birds</h3>
                </div>
              </router-link>
            </div>
          </div>
          <div class="col-lg-4 col-md-4">
            <div class="single-food-category cate-padding-3 text-center mb-30">
              <router-link :to="{name:'viewCatalog',query:{catId:'CATS'}}">
                <div class="single-food-hover-2"><img src="../../static/picture/c-cats.png" alt="cats"></div>
                <div class="single-food-content">
                  <h3>Cats</h3>
                </div>
              </router-link>
            </div>
          </div>
          <div class="col-lg-4 col-md-4">
            <div class="single-food-category cate-padding-2 text-center mb-30">
              <router-link :to="{name:'viewCatalog',query:{catId:'FISH'}}">
                <div class="single-food-hover-2"><img src="../../static/picture/c-fish.png" alt="fish"></div>
                <div class="single-food-content">
                  <h3>Fish</h3>
                </div>
              </router-link>
            </div>
          </div>
          <div class="col-lg-4 col-md-4">
            <div class="single-food-category cate-padding-2 text-center mb-30">
              <router-link :to="{name:'viewCatalog',query:{catId:'REPTILES'}}">
                <div class="single-food-hover-2"><img src="../../static/picture/c-reptiles.png" alt="reptiles"></div>
                <div class="single-food-content">
                  <h3>Reptiles</h3>
                </div>
              </router-link>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="product-area pt-95 pb-70 gray-bg">
      <div class="container">
        <div class="section-title text-center mb-55">
          <h4>Most Popular</h4>
          <h2>Recent Products</h2>
        </div>
        <div class="row">
          <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6" v-for="showItem in showItemList">
            <div class="product-wrapper mb-10">
              <div class="product-img">
                <router-link :to="{name:'viewItem',query:{itemId:showItem.itemId,productId:showItem.productId,catId:showItem.categoryId}}">
                  <img :src="showItem.iImage" alt="">
                </router-link>
                <div class="product-action"><a title="Quick View" data-toggle="modal" data-target="#exampleModal" @click="chooseItem(showItem.itemId)">
                  <i class="ti-plus"></i></a>
                  <a title="Add To Cart" @click="addCart(showItem.itemId)">
                    <i class="ti-shopping-cart"></i></a>
                </div>
                <div class="product-action-wishlist">
                  <a title="Wishlist" @click="addWish(showItem.itemId)">
                    <i class="ti-heart"></i>
                  </a>
                </div>
              </div>
              <div class="product-content">
                <h4>
                  <router-link :to="{name:'viewItem',query:{itemId:showItem.itemId,productId:showItem.productId,catId:showItem.categoryId}}">{{showItem.iName}}</router-link>
                </h4>
                <div class="product-price"><span class="new">${{ showItem.nowPrice }}</span>
                  <span class="old">${{ showItem.oldPrice }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="deal-area bg-img pt-95 pb-100">
      <div class="container">
        <div class="section-title text-center mb-50">
          <h2>Promotion Product</h2>
        </div>
        <div class="row">
          <div class="col-lg-6 col-md-6">
            <div class="deal-img wow fadeInLeft">
              <router-link :to="{name:'viewItem',query:{itemId:'',productId:'',catId:''}}">
                <img src="../../static/picture/banner-2.png" alt="">
              </router-link>
            </div>
          </div>
          <div class="col-lg-6 col-md-6">
            <div class="deal-content">
              <h3>
                <router-link :to="{name:'viewItem',query:{itemId:'',productId:'',catId:''}}" class="btn-style">Golden
                  Retriever
                </router-link>
              </h3>
              <div class="deal-pro-price"><span class="deal-old-price">￥100.00</span><span>￥75.00</span></div>
              <p>Golden dog is a very gentle animal. </p>
              <p>It can not only accompany you as a relative, </p>
              <p>but also help you do some small things. </p>
              <p>It is a pet type that many people like.</p>
              <div class="discount-btn mt-35">
                <router-link :to="{name:'viewItem',query:{itemId:'',productId:'',catId:''}}" class="btn-style">SHOP
                  NOW
                </router-link>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="service-area bg-img pt-100 pb-65">
      <div class="container">
        <div class="row">
          <div class="col-lg-4 col-md-4">
            <div class="service-content text-center mb-30 service-color-1"><img
              src="../../static/picture/shipping.png" alt="">
              <h4>FREE SHIPPING</h4>
              <p>Free shipping on all order</p>
            </div>
          </div>
          <div class="col-lg-4 col-md-4">
            <div class="service-content text-center mb-30 service-color-2"><img src="../../static/picture/support.png"
                                                                                alt="">
              <h4>ONLINE SUPPORT</h4>
              <p>Online support 24 hours a day</p>
            </div>
          </div>
          <div class="col-lg-4 col-md-4">
            <div class="service-content text-center mb-30 service-color-3"><img src="../../static/picture/money.png"
                                                                                alt="">
              <h4>MONEY RETURN</h4>
              <p>Back guarantee under 5 days</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-hidden="true">
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span class="ti-close" aria-hidden="true"></span></button>
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-body">
            <div class="qwick-view-left">
              <div class="quick-view-learg-img">
                <div class="quick-view-tab-content tab-content">
                  <div class="tab-pane active show fade" id="modal1" role="tabpanel">
                    <img :src="item.iImage" alt=""></div>
                  <div class="tab-pane fade" id="modal2" role="tabpanel">
                    <img :src="item.iImage" alt=""></div>
                  <div class="tab-pane fade" id="modal3" role="tabpanel">
                    <img :src="item.iImage" alt=""></div>
                </div>
              </div>
              <div class="quick-view-list nav" role="tablist">
                <a class="active" href="#modal1" data-toggle="tab" role="tab">
                  <img :src="item.iImage" alt="">
                </a>
                <a href="#modal2" data-toggle="tab" role="tab">
                  <img :src="item.iImage" alt=""></a><a href="#modal3" data-toggle="tab" role="tab">
                <img :src="item.iImage" alt=""></a></div>
            </div>
            <div class="qwick-view-right">
              <div class="qwick-view-content">
                <h3>{{item.iName}}</h3>
                <div class="product-price"><span class="new">${{item.nowPrice}}</span><span class="old">${{item.oldPrice}}</span>
                </div>
                <div class="product-rating"><i class="ion-star theme-color"></i>
                  <i class="ion-star theme-color"></i><i class="ion-star theme-color"></i>
                  <i class="ion-star theme-color"></i><i class="ion-star theme-color"></i>
                </div>
                <p>{{item.iDescn}}</p>
                <div class="quickview-plus-minus">
                  <div class="cart-plus-minus">
                    <input type="text" value="2" name="qtybutton" class="cart-plus-minus-box"></div>
                  <div class="quickview-btn-cart">
                    <span class="btn-style" data-dismiss="modal" aria-label="Close" @click="addCart(item.itemId)">add to cart</span>
                  </div>
                  <div class="quickview-btn-wishlist" @click="addWish(item.itemId)">
                    <a class="btn-hover">
                      <i class="ti-heart"></i>
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import index from "../../static/js/pet/index";

export default {
  ...index
}

</script>


<style scoped>
@import "../../static/css/bootstrap.min.css";
@import "../../static/css/animate.css";
@import "../../static/css/simple-line-icons.css";
@import "../../static/css/themify-icons.css";
@import "../../static/css/owl.carousel.min.css";
@import "../../static/css/slick.css";
@import "../../static/css/meanmenu.min.css";
@import "../../static/css/style2.css";
@import "../../static/css/responsive.css";
</style>
